<!-- created:2022/12/11 22:45 By AdinZ -->
<template>
  <div class="file-upload" v-if="$store.state.upload.show">
    <el-drawer v-model="visible" title="文件上传" direction="rtl" @closed="$store.dispatch('upload/hide')">
      <div class="upload-box">
        <el-upload class="upload-demo" drag action="/api/public/file/upload"
                   multiple :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError"
                   :on-exceed="onExceed">
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽文件到此或 or <em>点击上传</em>
          </div>
        </el-upload>
      </div>
      <div class="file-history">
        <el-card class="box-card">
          <template #header>
            <div class="card-header flex">
              <div class="flex1">最近上传文件记录</div>
              <el-button class="button" text style="color: red" @click="deleteHistory">
                <el-icon color="red">
                  <Delete/>
                </el-icon>
                删除记录
              </el-button>
            </div>
          </template>
          <div v-for="o in historyList" :key="o" class="text item">
            <div class="flex flex-center">
              <el-image style="width: 50px;height: 50px" :src="o.src"/>
              <div class="upload-created flex1" style="text-align: right">
                <p>{{ o.format }}</p>
                <p>{{ (o.size / 2045).toFixed(3) }}MB</p>
              </div>
              <div class="button flex1" style="text-align: right">
                <el-button @click="handlerCallback(o)" circle icon="Check" type="primary"></el-button>
              </div>
            </div>
            <el-divider/>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "FileUpload",
  data() {
    return {
      visible: false,
      history: []
    }
  },
  watch: {
    '$store.state.upload.show'(show) {
      this.visible = show;
      if (show) this.getHistory();
    }
  },
  computed: {
    historyList() {
      if (this.history.length == 0) return []
      return this.history;
    }
  },
  methods: {
    beforeUpload(file) {
      const size = file.size / 1024 / 1024
      if (size > 100) {
        this.$api.message('文件不能超过100M')
        return false
      }
      return true
    },
    onSuccess(response, file, fileList) {
      response.data['src'] = response.data.filePath;
      this.saveHistory(response.data)
      fileList = []
      console.log('文件上传成功', response, file, fileList)
      this.handlerCallback(response.data)

    },
    onError(err) {
      console.log('上传出错', err)
      this.$api.error(err.message)
    },
    onExceed(file, fileList) {
      console.log('超出限制', file, fileList)
    },

    handlerCallback(data) {
      this.$store.dispatch('upload/execute', [data])
    },

    getHistory() {
      const item = localStorage.getItem('upload-history');
      if (!item || item == '') {
        return
      }
      this.history = JSON.parse(item)
    },
    saveHistory(data) {
      data['created'] = Date.now()
      this.history.push(data)
      localStorage.setItem('upload-history', JSON.stringify(this.history))
    },
    deleteHistory() {
      localStorage.removeItem('upload-history')
    },

  },

}
</script>

<style scoped lang="scss">
.file-upload {

}
</style>
